<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import { useStore } from 'vuex';
import initViewer from '../utils/cesiumMap.js';

const store = useStore();

// 添加处理窗口resize事件的方法
const handleResize = () => {
  const cesiumContainer = document.getElementById('cesiumContainer');
  if (cesiumContainer) {
    cesiumContainer.style.width = `${window.innerWidth}px`;
    cesiumContainer.style.height = `${window.innerHeight}px`;
  }
};

onMounted(() => {
  const viewer = initViewer('cesiumContainer');
  store.dispatch('updateViewer', viewer); // 更新 Vuex 中的 viewer 状态
  // 添加窗口resize事件监听器
  window.addEventListener('resize', handleResize);
  // 初始化时调用一次handleResize
  handleResize();
});

onBeforeUnmount(() => {
  // 移除窗口resize事件监听器
  window.removeEventListener('resize', handleResize);
});
</script>


<template>
  <div>
    <div class="map-box" id="cesiumContainer"></div>
  </div>
</template>


<style scoped>
.map-box {
  width: 100%;
  height: 100%;
}
</style>
